+
Github
Figma

Icons

Icons should be used to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section. Our icons are designed with our brand personality baked in.

We have supported 2 types of icons: react and iconify, for iconify you can checkout the web site of iconify for usage and installation

Import

For react icons:
import {Activity} from '@comfortdelgro/compass-icons/react'

For iconify icons:
import {Icon} from '@iconify/react'
import {Activity} from '@comfortdelgro/compass-icons/iconify'

or

For react icons:
import Activity from '@comfortdelgro/compass-icons/react/activity'

For iconify icons:
import {Icon} from '@iconify/react'
import Activity from '@comfortdelgro/compass-icons/iconify/activity'

Usage

<Activity width={20} height={20} color='red' />

or with iconify

<Icon icon={activityIcon} width={20} height={20} />

Filled Icons

Import and Usage

import AddressBookFilled from '@comfortdelgro/compass-icons/react/filled/address-book-filled'
;<AddressBookFilled width={40} height={40} />

or

import {Icon} from '@iconify/react'
import addressBookFilled from '@comfortdelgro/compass-icons/iconify/filled/address-book-filled'
;<Icon icon={addressBookFilled} width={40} height={40} />
address-book-filled
arrow-down-filled
arrow-left-filled
arrow-right-filled
arrow-up-filled
calendar-days-filled
clock-filled
credit-card-filled
duplicate-image-filled
exclamation-filled
group-add-filled
group-settings-filled
heart-filled
image-filled
info-filled
mail-filled
notification-filled
pencil-filled
person-filled
profile-filled
question-filled
star-filled
thumbtack-filled
trash-filled
user-add-filled
warning-filled
Typescript
<AddressBookFilled width={40} height={40} /> 
<Icon icon={addressBookFilled} width={40} height={40} /> 

<ArrowDownFilled width={40} height={40} /> 
<Icon icon={arrowDownFilled} width={40} height={40} /> 

<ArrowLeftFilled width={40} height={40} /> 
<Icon icon={arrowLeftFilled} width={40} height={40} /> 

<ArrowRightFilled width={40} height={40} /> 
<Icon icon={arrowRightFilled} width={40} height={40} /> 

<ArrowUpFilled width={40} height={40} /> 
<Icon icon={arrowUpFilled} width={40} height={40} /> 

<CalendarDaysFilled width={40} height={40} /> 
<Icon icon={calendarDaysFilled} width={40} height={40} /> 

<ClockFilled width={40} height={40} /> 
<Icon icon={clockFilled} width={40} height={40} /> 

<CreditCardFilled width={40} height={40} /> 
<Icon icon={creditCardFilled} width={40} height={40} /> 

<DuplicateImageFilled width={40} height={40} /> 
<Icon icon={duplicateImageFilled} width={40} height={40} /> 

<ExclamationFilled width={40} height={40} /> 
<Icon icon={exclamationFilled} width={40} height={40} /> 

<GroupAddFilled width={40} height={40} /> 
<Icon icon={groupAddFilled} width={40} height={40} /> 

<GroupSettingsFilled width={40} height={40} /> 
<Icon icon={groupSettingsFilled} width={40} height={40} /> 

<HeartFilled width={40} height={40} /> 
<Icon icon={heartFilled} width={40} height={40} /> 

<ImageFilled width={40} height={40} /> 
<Icon icon={imageFilled} width={40} height={40} /> 

<InfoFilled width={40} height={40} /> 
<Icon icon={infoFilled} width={40} height={40} /> 

<MailFilled width={40} height={40} /> 
<Icon icon={mailFilled} width={40} height={40} /> 

<NotificationFilled width={40} height={40} /> 
<Icon icon={notificationFilled} width={40} height={40} /> 

<PencilFilled width={40} height={40} /> 
<Icon icon={pencilFilled} width={40} height={40} /> 

<PersonFilled width={40} height={40} /> 
<Icon icon={personFilled} width={40} height={40} /> 

<ProfileFilled width={40} height={40} /> 
<Icon icon={profileFilled} width={40} height={40} /> 

<QuestionFilled width={40} height={40} /> 
<Icon icon={questionFilled} width={40} height={40} /> 

<StarFilled width={40} height={40} /> 
<Icon icon={starFilled} width={40} height={40} /> 

<ThumbtackFilled width={40} height={40} /> 
<Icon icon={thumbtackFilled} width={40} height={40} /> 

<TrashFilled width={40} height={40} /> 
<Icon icon={trashFilled} width={40} height={40} /> 

<UserAddFilled width={40} height={40} /> 
<Icon icon={userAddFilled} width={40} height={40} /> 

<WarningFilled width={40} height={40} /> 
<Icon icon={warningFilled} width={40} height={40} />

Outline Icons

Import and Usage

import AddressBookOutlined from '@comfortdelgro/compass-icons/react/outlined/address-book-outlined'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import addressBookOutlined from '@comfortdelgro/compass-icons/iconify/outlined/address-book-outlined'
;<Icon icon={addressBookOutlined} width={40} height={40} />
address-book-outlined
arrow-down-outlined
arrow-left-outlined
arrow-right-outlined
arrow-up-outlined
calendar-days-outlined
clock-outlined
credit-card-outlined
duplicate-image-outlined
exclamation-outlined
group-add-outlined
group-settings-outlined
heart-outlined
image-outlined
info-outlined
mail-outlined
notification-outlined
pencil-outlined
person-outlined
profile-outlined
question-outlined
star-outlined
thumbtack-outlined
trash-outlined
user-add-outlined
user-group-outlined
warning-outlined
Typescript
<AddressBookOutlined width={40} height={40} /> 
<Icon icon={addressBookOutlined} width={40} height={40} /> 

<ArrowDownOutlined width={40} height={40} /> 
<Icon icon={arrowDownOutlined} width={40} height={40} /> 

<ArrowLeftOutlined width={40} height={40} /> 
<Icon icon={arrowLeftOutlined} width={40} height={40} /> 

<ArrowRightOutlined width={40} height={40} /> 
<Icon icon={arrowRightOutlined} width={40} height={40} /> 

<ArrowUpOutlined width={40} height={40} /> 
<Icon icon={arrowUpOutlined} width={40} height={40} /> 

<CalendarDaysOutlined width={40} height={40} /> 
<Icon icon={calendarDaysOutlined} width={40} height={40} /> 

<ClockOutlined width={40} height={40} /> 
<Icon icon={clockOutlined} width={40} height={40} /> 

<CreditCardOutlined width={40} height={40} /> 
<Icon icon={creditCardOutlined} width={40} height={40} /> 

<DuplicateImageOutlined width={40} height={40} /> 
<Icon icon={duplicateImageOutlined} width={40} height={40} /> 

<ExclamationOutlined width={40} height={40} /> 
<Icon icon={exclamationOutlined} width={40} height={40} /> 

<GroupAddOutlined width={40} height={40} /> 
<Icon icon={groupAddOutlined} width={40} height={40} /> 

<GroupSettingsOutlined width={40} height={40} /> 
<Icon icon={groupSettingsOutlined} width={40} height={40} /> 

<HeartOutlined width={40} height={40} /> 
<Icon icon={heartOutlined} width={40} height={40} /> 

<ImageOutlined width={40} height={40} /> 
<Icon icon={imageOutlined} width={40} height={40} /> 

<InfoOutlined width={40} height={40} /> 
<Icon icon={infoOutlined} width={40} height={40} /> 

<MailOutlined width={40} height={40} /> 
<Icon icon={mailOutlined} width={40} height={40} /> 

<NotificationOutlined width={40} height={40} /> 
<Icon icon={notificationOutlined} width={40} height={40} /> 

<PencilOutlined width={40} height={40} /> 
<Icon icon={pencilOutlined} width={40} height={40} /> 

<PersonOutlined width={40} height={40} /> 
<Icon icon={personOutlined} width={40} height={40} /> 

<ProfileOutlined width={40} height={40} /> 
<Icon icon={profileOutlined} width={40} height={40} /> 

<QuestionOutlined width={40} height={40} /> 
<Icon icon={questionOutlined} width={40} height={40} /> 

<StarOutlined width={40} height={40} /> 
<Icon icon={starOutlined} width={40} height={40} /> 

<ThumbtackOutlined width={40} height={40} /> 
<Icon icon={thumbtackOutlined} width={40} height={40} /> 

<TrashOutlined width={40} height={40} /> 
<Icon icon={trashOutlined} width={40} height={40} /> 

<UserAddOutlined width={40} height={40} /> 
<Icon icon={userAddOutlined} width={40} height={40} /> 

<UserGroupOutlined width={40} height={40} /> 
<Icon icon={userGroupOutlined} width={40} height={40} /> 

<WarningOutlined width={40} height={40} /> 
<Icon icon={warningOutlined} width={40} height={40} />

Duotone Icons

Import and Usage

import BadgeDollarDuotone from '@comfortdelgro/compass-icons/react/duotone/badge-dollar-duotone'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import badgeDollarDuotone from '@comfortdelgro/compass-icons/iconify/duotone/badge-dollar-duotone'
;<Icon icon={badgeDollarDuotone} width={40} height={40} />
badge-dollar-duotone
calendar-days-duotone
chart-line-up-duotone
chart-pie-duotone
edit-duotone
flag-duotone
gears-duotone
grid-duotone
notification-duotone
org-chart-duotone
password-duotone
trash-duotone
user-duotone
Typescript
<BadgeDollarDuotone width={40} height={40} /> 
<Icon icon={badgeDollarDuotone} width={40} height={40} /> 

<CalendarDaysDuotone width={40} height={40} /> 
<Icon icon={calendarDaysDuotone} width={40} height={40} /> 

<ChartLineUpDuotone width={40} height={40} /> 
<Icon icon={chartLineUpDuotone} width={40} height={40} /> 

<ChartPieDuotone width={40} height={40} /> 
<Icon icon={chartPieDuotone} width={40} height={40} /> 

<EditDuotone width={40} height={40} /> 
<Icon icon={editDuotone} width={40} height={40} /> 

<FlagDuotone width={40} height={40} /> 
<Icon icon={flagDuotone} width={40} height={40} /> 

<GearsDuotone width={40} height={40} /> 
<Icon icon={gearsDuotone} width={40} height={40} /> 

<GridDuotone width={40} height={40} /> 
<Icon icon={gridDuotone} width={40} height={40} /> 

<NotificationDuotone width={40} height={40} /> 
<Icon icon={notificationDuotone} width={40} height={40} /> 

<OrgChartDuotone width={40} height={40} /> 
<Icon icon={orgChartDuotone} width={40} height={40} /> 

<PasswordDuotone width={40} height={40} /> 
<Icon icon={passwordDuotone} width={40} height={40} /> 

<TrashDuotone width={40} height={40} /> 
<Icon icon={trashDuotone} width={40} height={40} /> 

<UserDuotone width={40} height={40} /> 
<Icon icon={userDuotone} width={40} height={40} />

Colorful Icons

Import and Usage

import Compass from '@comfortdelgro/compass-icons/react/colorful/compass'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import compass from '@comfortdelgro/compass-icons/iconify/colorful/compass'
;<Icon icon={compass} width={40} height={40} />
admin-potal-light
admin-potal
caby-portal-light
caby-portal
clubhouse
cms-light
cms
comfort-connect-light
comfort-connect
compass
crown
discord
doctype
dribbble
facebook
figma
fms-light
fms
fnb-light
fnb
google
linkedin
pinterest
reddit
signal
snapchat
telegram
tem-light
tem
tiktok
tumblr
twitter
workbench-light
workbench-text
workbench
youtube
zig-biz-square
zig-biz-tsm
zig-biz-white
zig-biz
zig-store-light
zig-store
Typescript
<AdminPotalLight width={40} height={40} /> 
<Icon icon={adminPotalLight} width={40} height={40} /> 

<AdminPotal width={40} height={40} /> 
<Icon icon={adminPotal} width={40} height={40} /> 

<CabyPortalLight width={40} height={40} /> 
<Icon icon={cabyPortalLight} width={40} height={40} /> 

<CabyPortal width={40} height={40} /> 
<Icon icon={cabyPortal} width={40} height={40} /> 

<Clubhouse width={40} height={40} /> 
<Icon icon={clubhouse} width={40} height={40} /> 

<CmsLight width={40} height={40} /> 
<Icon icon={cmsLight} width={40} height={40} /> 

<Cms width={40} height={40} /> 
<Icon icon={cms} width={40} height={40} /> 

<ComfortConnectLight width={40} height={40} /> 
<Icon icon={comfortConnectLight} width={40} height={40} /> 

<ComfortConnect width={40} height={40} /> 
<Icon icon={comfortConnect} width={40} height={40} /> 

<Compass width={40} height={40} /> 
<Icon icon={compass} width={40} height={40} /> 

<Crown width={40} height={40} /> 
<Icon icon={crown} width={40} height={40} /> 

<Discord width={40} height={40} /> 
<Icon icon={discord} width={40} height={40} /> 

<Doctype width={40} height={40} /> 
<Icon icon={doctype} width={40} height={40} /> 

<Dribbble width={40} height={40} /> 
<Icon icon={dribbble} width={40} height={40} /> 

<Facebook width={40} height={40} /> 
<Icon icon={facebook} width={40} height={40} /> 

<Figma width={40} height={40} /> 
<Icon icon={figma} width={40} height={40} /> 

<FmsLight width={40} height={40} /> 
<Icon icon={fmsLight} width={40} height={40} /> 

<Fms width={40} height={40} /> 
<Icon icon={fms} width={40} height={40} /> 

<FnbLight width={40} height={40} /> 
<Icon icon={fnbLight} width={40} height={40} /> 

<Fnb width={40} height={40} /> 
<Icon icon={fnb} width={40} height={40} /> 

<Google width={40} height={40} /> 
<Icon icon={google} width={40} height={40} /> 

<Linkedin width={40} height={40} /> 
<Icon icon={linkedin} width={40} height={40} /> 

<Pinterest width={40} height={40} /> 
<Icon icon={pinterest} width={40} height={40} /> 

<Reddit width={40} height={40} /> 
<Icon icon={reddit} width={40} height={40} /> 

<Signal width={40} height={40} /> 
<Icon icon={signal} width={40} height={40} /> 

<Snapchat width={40} height={40} /> 
<Icon icon={snapchat} width={40} height={40} /> 

<Telegram width={40} height={40} /> 
<Icon icon={telegram} width={40} height={40} /> 

<TemLight width={40} height={40} /> 
<Icon icon={temLight} width={40} height={40} /> 

<Tem width={40} height={40} /> 
<Icon icon={tem} width={40} height={40} /> 

<Tiktok width={40} height={40} /> 
<Icon icon={tiktok} width={40} height={40} /> 

<Tumblr width={40} height={40} /> 
<Icon icon={tumblr} width={40} height={40} /> 

<Twitter width={40} height={40} /> 
<Icon icon={twitter} width={40} height={40} /> 

<WorkbenchLight width={40} height={40} /> 
<Icon icon={workbenchLight} width={40} height={40} /> 

<WorkbenchText width={40} height={40} /> 
<Icon icon={workbenchText} width={40} height={40} /> 

<Workbench width={40} height={40} /> 
<Icon icon={workbench} width={40} height={40} /> 

<Youtube width={40} height={40} /> 
<Icon icon={youtube} width={40} height={40} /> 

<ZigBizSquare width={40} height={40} /> 
<Icon icon={zigBizSquare} width={40} height={40} /> 

<ZigBizTsm width={40} height={40} /> 
<Icon icon={zigBizTsm} width={40} height={40} /> 

<ZigBizWhite width={40} height={40} /> 
<Icon icon={zigBizWhite} width={40} height={40} /> 

<ZigBiz width={40} height={40} /> 
<Icon icon={zigBiz} width={40} height={40} /> 

<ZigStoreLight width={40} height={40} /> 
<Icon icon={zigStoreLight} width={40} height={40} /> 

<ZigStore width={40} height={40} /> 
<Icon icon={zigStore} width={40} height={40} />

Payment Icons

Import and Usage

import Affirm from '@comfortdelgro/compass-icons/react/payment/affirm'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import affirm from '@comfortdelgro/compass-icons/iconify/payment/affirm'
;<Icon icon={affirm} width={40} height={40} />
affirm
alipay
amazon
amex
apple-pay
bancontact
bitcoin-cash
bitcoin
bitpay
citadele
diners-club
discover
elo
etherium
forbrugsforeningen
giro-pay
google-pay
ideal
interac
jcb
klarna
lightcoin
maestro
mastercard
payoneer
paypal
paysafe
qiwi
sepa
shop-pay
skrill
sofort
stripe
union-pay
verifone
visa
we-chat
web-money
yandex
Typescript
<Affirm width={40} height={40} /> 
<Icon icon={affirm} width={40} height={40} /> 

<Alipay width={40} height={40} /> 
<Icon icon={alipay} width={40} height={40} /> 

<Amazon width={40} height={40} /> 
<Icon icon={amazon} width={40} height={40} /> 

<Amex width={40} height={40} /> 
<Icon icon={amex} width={40} height={40} /> 

<ApplePay width={40} height={40} /> 
<Icon icon={applePay} width={40} height={40} /> 

<Bancontact width={40} height={40} /> 
<Icon icon={bancontact} width={40} height={40} /> 

<BitcoinCash width={40} height={40} /> 
<Icon icon={bitcoinCash} width={40} height={40} /> 

<Bitcoin width={40} height={40} /> 
<Icon icon={bitcoin} width={40} height={40} /> 

<Bitpay width={40} height={40} /> 
<Icon icon={bitpay} width={40} height={40} /> 

<Citadele width={40} height={40} /> 
<Icon icon={citadele} width={40} height={40} /> 

<DinersClub width={40} height={40} /> 
<Icon icon={dinersClub} width={40} height={40} /> 

<Discover width={40} height={40} /> 
<Icon icon={discover} width={40} height={40} /> 

<Elo width={40} height={40} /> 
<Icon icon={elo} width={40} height={40} /> 

<Etherium width={40} height={40} /> 
<Icon icon={etherium} width={40} height={40} /> 

<Forbrugsforeningen width={40} height={40} /> 
<Icon icon={forbrugsforeningen} width={40} height={40} /> 

<GiroPay width={40} height={40} /> 
<Icon icon={giroPay} width={40} height={40} /> 

<GooglePay width={40} height={40} /> 
<Icon icon={googlePay} width={40} height={40} /> 

<Ideal width={40} height={40} /> 
<Icon icon={ideal} width={40} height={40} /> 

<Interac width={40} height={40} /> 
<Icon icon={interac} width={40} height={40} /> 

<Jcb width={40} height={40} /> 
<Icon icon={jcb} width={40} height={40} /> 

<Klarna width={40} height={40} /> 
<Icon icon={klarna} width={40} height={40} /> 

<Lightcoin width={40} height={40} /> 
<Icon icon={lightcoin} width={40} height={40} /> 

<Maestro width={40} height={40} /> 
<Icon icon={maestro} width={40} height={40} /> 

<Mastercard width={40} height={40} /> 
<Icon icon={mastercard} width={40} height={40} /> 

<Payoneer width={40} height={40} /> 
<Icon icon={payoneer} width={40} height={40} /> 

<Paypal width={40} height={40} /> 
<Icon icon={paypal} width={40} height={40} /> 

<Paysafe width={40} height={40} /> 
<Icon icon={paysafe} width={40} height={40} /> 

<Qiwi width={40} height={40} /> 
<Icon icon={qiwi} width={40} height={40} /> 

<Sepa width={40} height={40} /> 
<Icon icon={sepa} width={40} height={40} /> 

<ShopPay width={40} height={40} /> 
<Icon icon={shopPay} width={40} height={40} /> 

<Skrill width={40} height={40} /> 
<Icon icon={skrill} width={40} height={40} /> 

<Sofort width={40} height={40} /> 
<Icon icon={sofort} width={40} height={40} /> 

<Stripe width={40} height={40} /> 
<Icon icon={stripe} width={40} height={40} /> 

<UnionPay width={40} height={40} /> 
<Icon icon={unionPay} width={40} height={40} /> 

<Verifone width={40} height={40} /> 
<Icon icon={verifone} width={40} height={40} /> 

<Visa width={40} height={40} /> 
<Icon icon={visa} width={40} height={40} /> 

<WeChat width={40} height={40} /> 
<Icon icon={weChat} width={40} height={40} /> 

<WebMoney width={40} height={40} /> 
<Icon icon={webMoney} width={40} height={40} /> 

<Yandex width={40} height={40} /> 
<Icon icon={yandex} width={40} height={40} />

Other Icons

Import and Usage

import Activity from '@comfortdelgro/compass-icons/react/activity'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import activity from '@comfortdelgro/compass-icons/iconify/activity'
;<Icon icon={activity} width={40} height={40} />
activity
align-center
align-justify
align-left
align-right
angellist
apple
arrow-down
arrow-left
arrow-right
arrow-up
bid
bold
browser
bug
building
bus-2
bus-and-car
bus
calendar
cancelled
capacity
car
caret-down
caret-left
caret-right
caret-up
chart
chat
cities
clapperboard-play
classification
clipboard
cloud-upload
copy
cross-circle
cross
customer-service
dashboard
deleted
document
download
driver
edit
email
excel
export
eye-slash
eye-solid
face-frown
face-laugh
face-meh
face-sad-tear
face-smile-heart
face-smile
facebook-circular
facebook-square
file-laptop
file-pen
file-signature
file
fill
filter
flag
folder-open
folder
font-colour
font
gauge
gears
github
globe
google
grid
grip-dots
h
h1
h2
h3
h4
h5
h6
hat-wizard
heading
hexagon-xmark
hide
home
hourglass-clock
info-square
inspect
instagram
invoice
italic
job-2
job
key
layers
lightbulb-on
link
linkedin
list-ol
list-ul
list
logout
low-volume
maintenance
map-marked
map-marker
map
menu
message-lines
message
minus-square
minus
money-bill
money-check-alt
money
mute
notification-badge
notification-off
outdent
paste
pause
pdf
pen-nib
phone
pinterest
plus-square
plus
profile-card
profile
project
question-square
quote-left
quote-right
rating-star-0
rating-star-10
rating-star-100
rating-star-20
rating-star-30
rating-star-40
rating-star-50
rating-star-60
rating-star-70
rating-star-80
rating-star-90
refresh
reveal
school
search
settings
shapes
share
shield-2
shield
snapchat
sort-1-to-9-ascending
sort-1-to-9-descending
sort-9-to-1-ascending
sort-9-to-1-descending
sort
sparkle
spreadsheet
stamp
status
store
strikethrough
suitcase
table-columns
table
tags
taxi
text-height
thumb-down
thumb-up
tick-circle
tick
ticket
timeline
twitter
underline
unpin
upload
user-tie
users
verified
volume
word
youtube
zoom-in
zoom-minus
zoom-out
zoom-plus
Typescript
<Activity width={40} height={40} /> 
<Icon icon={activity} width={40} height={40} /> 

<AlignCenter width={40} height={40} /> 
<Icon icon={alignCenter} width={40} height={40} /> 

<AlignJustify width={40} height={40} /> 
<Icon icon={alignJustify} width={40} height={40} /> 

<AlignLeft width={40} height={40} /> 
<Icon icon={alignLeft} width={40} height={40} /> 

<AlignRight width={40} height={40} /> 
<Icon icon={alignRight} width={40} height={40} /> 

<Angellist width={40} height={40} /> 
<Icon icon={angellist} width={40} height={40} /> 

<Apple width={40} height={40} /> 
<Icon icon={apple} width={40} height={40} /> 

<ArrowDown width={40} height={40} /> 
<Icon icon={arrowDown} width={40} height={40} /> 

<ArrowLeft width={40} height={40} /> 
<Icon icon={arrowLeft} width={40} height={40} /> 

<ArrowRight width={40} height={40} /> 
<Icon icon={arrowRight} width={40} height={40} /> 

<ArrowUp width={40} height={40} /> 
<Icon icon={arrowUp} width={40} height={40} /> 

<Bid width={40} height={40} /> 
<Icon icon={bid} width={40} height={40} /> 

<Bold width={40} height={40} /> 
<Icon icon={bold} width={40} height={40} /> 

<Browser width={40} height={40} /> 
<Icon icon={browser} width={40} height={40} /> 

<Bug width={40} height={40} /> 
<Icon icon={bug} width={40} height={40} /> 

<Building width={40} height={40} /> 
<Icon icon={building} width={40} height={40} /> 

<Bus2 width={40} height={40} /> 
<Icon icon={bus-2} width={40} height={40} /> 

<BusAndCar width={40} height={40} /> 
<Icon icon={busAndCar} width={40} height={40} /> 

<Bus width={40} height={40} /> 
<Icon icon={bus} width={40} height={40} /> 

<Calendar width={40} height={40} /> 
<Icon icon={calendar} width={40} height={40} /> 

<Cancelled width={40} height={40} /> 
<Icon icon={cancelled} width={40} height={40} /> 

<Capacity width={40} height={40} /> 
<Icon icon={capacity} width={40} height={40} /> 

<Car width={40} height={40} /> 
<Icon icon={car} width={40} height={40} /> 

<CaretDown width={40} height={40} /> 
<Icon icon={caretDown} width={40} height={40} /> 

<CaretLeft width={40} height={40} /> 
<Icon icon={caretLeft} width={40} height={40} /> 

<CaretRight width={40} height={40} /> 
<Icon icon={caretRight} width={40} height={40} /> 

<CaretUp width={40} height={40} /> 
<Icon icon={caretUp} width={40} height={40} /> 

<Chart width={40} height={40} /> 
<Icon icon={chart} width={40} height={40} /> 

<Chat width={40} height={40} /> 
<Icon icon={chat} width={40} height={40} /> 

<Cities width={40} height={40} /> 
<Icon icon={cities} width={40} height={40} /> 

<ClapperboardPlay width={40} height={40} /> 
<Icon icon={clapperboardPlay} width={40} height={40} /> 

<Classification width={40} height={40} /> 
<Icon icon={classification} width={40} height={40} /> 

<Clipboard width={40} height={40} /> 
<Icon icon={clipboard} width={40} height={40} /> 

<CloudUpload width={40} height={40} /> 
<Icon icon={cloudUpload} width={40} height={40} /> 

<Copy width={40} height={40} /> 
<Icon icon={copy} width={40} height={40} /> 

<CrossCircle width={40} height={40} /> 
<Icon icon={crossCircle} width={40} height={40} /> 

<Cross width={40} height={40} /> 
<Icon icon={cross} width={40} height={40} /> 

<CustomerService width={40} height={40} /> 
<Icon icon={customerService} width={40} height={40} /> 

<Dashboard width={40} height={40} /> 
<Icon icon={dashboard} width={40} height={40} /> 

<Deleted width={40} height={40} /> 
<Icon icon={deleted} width={40} height={40} /> 

<Document width={40} height={40} /> 
<Icon icon={document} width={40} height={40} /> 

<Download width={40} height={40} /> 
<Icon icon={download} width={40} height={40} /> 

<Driver width={40} height={40} /> 
<Icon icon={driver} width={40} height={40} /> 

<Edit width={40} height={40} /> 
<Icon icon={edit} width={40} height={40} /> 

<Email width={40} height={40} /> 
<Icon icon={email} width={40} height={40} /> 

<Excel width={40} height={40} /> 
<Icon icon={excel} width={40} height={40} /> 

<Export width={40} height={40} /> 
<Icon icon={export} width={40} height={40} /> 

<EyeSlash width={40} height={40} /> 
<Icon icon={eyeSlash} width={40} height={40} /> 

<EyeSolid width={40} height={40} /> 
<Icon icon={eyeSolid} width={40} height={40} /> 

<FaceFrown width={40} height={40} /> 
<Icon icon={faceFrown} width={40} height={40} /> 

<FaceLaugh width={40} height={40} /> 
<Icon icon={faceLaugh} width={40} height={40} /> 

<FaceMeh width={40} height={40} /> 
<Icon icon={faceMeh} width={40} height={40} /> 

<FaceSadTear width={40} height={40} /> 
<Icon icon={faceSadTear} width={40} height={40} /> 

<FaceSmileHeart width={40} height={40} /> 
<Icon icon={faceSmileHeart} width={40} height={40} /> 

<FaceSmile width={40} height={40} /> 
<Icon icon={faceSmile} width={40} height={40} /> 

<FacebookCircular width={40} height={40} /> 
<Icon icon={facebookCircular} width={40} height={40} /> 

<FacebookSquare width={40} height={40} /> 
<Icon icon={facebookSquare} width={40} height={40} /> 

<FileLaptop width={40} height={40} /> 
<Icon icon={fileLaptop} width={40} height={40} /> 

<FilePen width={40} height={40} /> 
<Icon icon={filePen} width={40} height={40} /> 

<FileSignature width={40} height={40} /> 
<Icon icon={fileSignature} width={40} height={40} /> 

<File width={40} height={40} /> 
<Icon icon={file} width={40} height={40} /> 

<Fill width={40} height={40} /> 
<Icon icon={fill} width={40} height={40} /> 

<Filter width={40} height={40} /> 
<Icon icon={filter} width={40} height={40} /> 

<Flag width={40} height={40} /> 
<Icon icon={flag} width={40} height={40} /> 

<FolderOpen width={40} height={40} /> 
<Icon icon={folderOpen} width={40} height={40} /> 

<Folder width={40} height={40} /> 
<Icon icon={folder} width={40} height={40} /> 

<FontColour width={40} height={40} /> 
<Icon icon={fontColour} width={40} height={40} /> 

<Font width={40} height={40} /> 
<Icon icon={font} width={40} height={40} /> 

<Gauge width={40} height={40} /> 
<Icon icon={gauge} width={40} height={40} /> 

<Gears width={40} height={40} /> 
<Icon icon={gears} width={40} height={40} /> 

<Github width={40} height={40} /> 
<Icon icon={github} width={40} height={40} /> 

<Globe width={40} height={40} /> 
<Icon icon={globe} width={40} height={40} /> 

<Google width={40} height={40} /> 
<Icon icon={google} width={40} height={40} /> 

<Grid width={40} height={40} /> 
<Icon icon={grid} width={40} height={40} /> 

<GripDots width={40} height={40} /> 
<Icon icon={gripDots} width={40} height={40} /> 

<H width={40} height={40} /> 
<Icon icon={h} width={40} height={40} /> 

<H1 width={40} height={40} /> 
<Icon icon={h1} width={40} height={40} /> 

<H2 width={40} height={40} /> 
<Icon icon={h2} width={40} height={40} /> 

<H3 width={40} height={40} /> 
<Icon icon={h3} width={40} height={40} /> 

<H4 width={40} height={40} /> 
<Icon icon={h4} width={40} height={40} /> 

<H5 width={40} height={40} /> 
<Icon icon={h5} width={40} height={40} /> 

<H6 width={40} height={40} /> 
<Icon icon={h6} width={40} height={40} /> 

<HatWizard width={40} height={40} /> 
<Icon icon={hatWizard} width={40} height={40} /> 

<Heading width={40} height={40} /> 
<Icon icon={heading} width={40} height={40} /> 

<HexagonXmark width={40} height={40} /> 
<Icon icon={hexagonXmark} width={40} height={40} /> 

<Hide width={40} height={40} /> 
<Icon icon={hide} width={40} height={40} /> 

<Home width={40} height={40} /> 
<Icon icon={home} width={40} height={40} /> 

<HourglassClock width={40} height={40} /> 
<Icon icon={hourglassClock} width={40} height={40} /> 

<InfoSquare width={40} height={40} /> 
<Icon icon={infoSquare} width={40} height={40} /> 

<Inspect width={40} height={40} /> 
<Icon icon={inspect} width={40} height={40} /> 

<Instagram width={40} height={40} /> 
<Icon icon={instagram} width={40} height={40} /> 

<Invoice width={40} height={40} /> 
<Icon icon={invoice} width={40} height={40} /> 

<Italic width={40} height={40} /> 
<Icon icon={italic} width={40} height={40} /> 

<Job2 width={40} height={40} /> 
<Icon icon={job-2} width={40} height={40} /> 

<Job width={40} height={40} /> 
<Icon icon={job} width={40} height={40} /> 

<Key width={40} height={40} /> 
<Icon icon={key} width={40} height={40} /> 

<Layers width={40} height={40} /> 
<Icon icon={layers} width={40} height={40} /> 

<LightbulbOn width={40} height={40} /> 
<Icon icon={lightbulbOn} width={40} height={40} /> 

<Link width={40} height={40} /> 
<Icon icon={link} width={40} height={40} /> 

<Linkedin width={40} height={40} /> 
<Icon icon={linkedin} width={40} height={40} /> 

<ListOl width={40} height={40} /> 
<Icon icon={listOl} width={40} height={40} /> 

<ListUl width={40} height={40} /> 
<Icon icon={listUl} width={40} height={40} /> 

<List width={40} height={40} /> 
<Icon icon={list} width={40} height={40} /> 

<Logout width={40} height={40} /> 
<Icon icon={logout} width={40} height={40} /> 

<LowVolume width={40} height={40} /> 
<Icon icon={lowVolume} width={40} height={40} /> 

<Maintenance width={40} height={40} /> 
<Icon icon={maintenance} width={40} height={40} /> 

<MapMarked width={40} height={40} /> 
<Icon icon={mapMarked} width={40} height={40} /> 

<MapMarker width={40} height={40} /> 
<Icon icon={mapMarker} width={40} height={40} /> 

<Map width={40} height={40} /> 
<Icon icon={map} width={40} height={40} /> 

<Menu width={40} height={40} /> 
<Icon icon={menu} width={40} height={40} /> 

<MessageLines width={40} height={40} /> 
<Icon icon={messageLines} width={40} height={40} /> 

<Message width={40} height={40} /> 
<Icon icon={message} width={40} height={40} /> 

<MinusSquare width={40} height={40} /> 
<Icon icon={minusSquare} width={40} height={40} /> 

<Minus width={40} height={40} /> 
<Icon icon={minus} width={40} height={40} /> 

<MoneyBill width={40} height={40} /> 
<Icon icon={moneyBill} width={40} height={40} /> 

<MoneyCheckAlt width={40} height={40} /> 
<Icon icon={moneyCheckAlt} width={40} height={40} /> 

<Money width={40} height={40} /> 
<Icon icon={money} width={40} height={40} /> 

<Mute width={40} height={40} /> 
<Icon icon={mute} width={40} height={40} /> 

<NotificationBadge width={40} height={40} /> 
<Icon icon={notificationBadge} width={40} height={40} /> 

<NotificationOff width={40} height={40} /> 
<Icon icon={notificationOff} width={40} height={40} /> 

<Outdent width={40} height={40} /> 
<Icon icon={outdent} width={40} height={40} /> 

<Paste width={40} height={40} /> 
<Icon icon={paste} width={40} height={40} /> 

<Pause width={40} height={40} /> 
<Icon icon={pause} width={40} height={40} /> 

<Pdf width={40} height={40} /> 
<Icon icon={pdf} width={40} height={40} /> 

<PenNib width={40} height={40} /> 
<Icon icon={penNib} width={40} height={40} /> 

<Phone width={40} height={40} /> 
<Icon icon={phone} width={40} height={40} /> 

<Pinterest width={40} height={40} /> 
<Icon icon={pinterest} width={40} height={40} /> 

<PlusSquare width={40} height={40} /> 
<Icon icon={plusSquare} width={40} height={40} /> 

<Plus width={40} height={40} /> 
<Icon icon={plus} width={40} height={40} /> 

<ProfileCard width={40} height={40} /> 
<Icon icon={profileCard} width={40} height={40} /> 

<Profile width={40} height={40} /> 
<Icon icon={profile} width={40} height={40} /> 

<Project width={40} height={40} /> 
<Icon icon={project} width={40} height={40} /> 

<QuestionSquare width={40} height={40} /> 
<Icon icon={questionSquare} width={40} height={40} /> 

<QuoteLeft width={40} height={40} /> 
<Icon icon={quoteLeft} width={40} height={40} /> 

<QuoteRight width={40} height={40} /> 
<Icon icon={quoteRight} width={40} height={40} /> 

<RatingStar0 width={40} height={40} /> 
<Icon icon={ratingStar-0} width={40} height={40} /> 

<RatingStar10 width={40} height={40} /> 
<Icon icon={ratingStar-10} width={40} height={40} /> 

<RatingStar100 width={40} height={40} /> 
<Icon icon={ratingStar-100} width={40} height={40} /> 

<RatingStar20 width={40} height={40} /> 
<Icon icon={ratingStar-20} width={40} height={40} /> 

<RatingStar30 width={40} height={40} /> 
<Icon icon={ratingStar-30} width={40} height={40} /> 

<RatingStar40 width={40} height={40} /> 
<Icon icon={ratingStar-40} width={40} height={40} /> 

<RatingStar50 width={40} height={40} /> 
<Icon icon={ratingStar-50} width={40} height={40} /> 

<RatingStar60 width={40} height={40} /> 
<Icon icon={ratingStar-60} width={40} height={40} /> 

<RatingStar70 width={40} height={40} /> 
<Icon icon={ratingStar-70} width={40} height={40} /> 

<RatingStar80 width={40} height={40} /> 
<Icon icon={ratingStar-80} width={40} height={40} /> 

<RatingStar90 width={40} height={40} /> 
<Icon icon={ratingStar-90} width={40} height={40} /> 

<Refresh width={40} height={40} /> 
<Icon icon={refresh} width={40} height={40} /> 

<Reveal width={40} height={40} /> 
<Icon icon={reveal} width={40} height={40} /> 

<School width={40} height={40} /> 
<Icon icon={school} width={40} height={40} /> 

<Search width={40} height={40} /> 
<Icon icon={search} width={40} height={40} /> 

<Settings width={40} height={40} /> 
<Icon icon={settings} width={40} height={40} /> 

<Shapes width={40} height={40} /> 
<Icon icon={shapes} width={40} height={40} /> 

<Share width={40} height={40} /> 
<Icon icon={share} width={40} height={40} /> 

<Shield2 width={40} height={40} /> 
<Icon icon={shield-2} width={40} height={40} /> 

<Shield width={40} height={40} /> 
<Icon icon={shield} width={40} height={40} /> 

<Snapchat width={40} height={40} /> 
<Icon icon={snapchat} width={40} height={40} /> 

<Sort1To9Ascending width={40} height={40} /> 
<Icon icon={sort-1To-9Ascending} width={40} height={40} /> 

<Sort1To9Descending width={40} height={40} /> 
<Icon icon={sort-1To-9Descending} width={40} height={40} /> 

<Sort9To1Ascending width={40} height={40} /> 
<Icon icon={sort-9To-1Ascending} width={40} height={40} /> 

<Sort9To1Descending width={40} height={40} /> 
<Icon icon={sort-9To-1Descending} width={40} height={40} /> 

<Sort width={40} height={40} /> 
<Icon icon={sort} width={40} height={40} /> 

<Sparkle width={40} height={40} /> 
<Icon icon={sparkle} width={40} height={40} /> 

<Spreadsheet width={40} height={40} /> 
<Icon icon={spreadsheet} width={40} height={40} /> 

<Stamp width={40} height={40} /> 
<Icon icon={stamp} width={40} height={40} /> 

<Status width={40} height={40} /> 
<Icon icon={status} width={40} height={40} /> 

<Store width={40} height={40} /> 
<Icon icon={store} width={40} height={40} /> 

<Strikethrough width={40} height={40} /> 
<Icon icon={strikethrough} width={40} height={40} /> 

<Suitcase width={40} height={40} /> 
<Icon icon={suitcase} width={40} height={40} /> 

<TableColumns width={40} height={40} /> 
<Icon icon={tableColumns} width={40} height={40} /> 

<Table width={40} height={40} /> 
<Icon icon={table} width={40} height={40} /> 

<Tags width={40} height={40} /> 
<Icon icon={tags} width={40} height={40} /> 

<Taxi width={40} height={40} /> 
<Icon icon={taxi} width={40} height={40} /> 

<TextHeight width={40} height={40} /> 
<Icon icon={textHeight} width={40} height={40} /> 

<ThumbDown width={40} height={40} /> 
<Icon icon={thumbDown} width={40} height={40} /> 

<ThumbUp width={40} height={40} /> 
<Icon icon={thumbUp} width={40} height={40} /> 

<TickCircle width={40} height={40} /> 
<Icon icon={tickCircle} width={40} height={40} /> 

<Tick width={40} height={40} /> 
<Icon icon={tick} width={40} height={40} /> 

<Ticket width={40} height={40} /> 
<Icon icon={ticket} width={40} height={40} /> 

<Timeline width={40} height={40} /> 
<Icon icon={timeline} width={40} height={40} /> 

<Twitter width={40} height={40} /> 
<Icon icon={twitter} width={40} height={40} /> 

<Underline width={40} height={40} /> 
<Icon icon={underline} width={40} height={40} /> 

<Unpin width={40} height={40} /> 
<Icon icon={unpin} width={40} height={40} /> 

<Upload width={40} height={40} /> 
<Icon icon={upload} width={40} height={40} /> 

<UserTie width={40} height={40} /> 
<Icon icon={userTie} width={40} height={40} /> 

<Users width={40} height={40} /> 
<Icon icon={users} width={40} height={40} /> 

<Verified width={40} height={40} /> 
<Icon icon={verified} width={40} height={40} /> 

<Volume width={40} height={40} /> 
<Icon icon={volume} width={40} height={40} /> 

<Word width={40} height={40} /> 
<Icon icon={word} width={40} height={40} /> 

<Youtube width={40} height={40} /> 
<Icon icon={youtube} width={40} height={40} /> 

<ZoomIn width={40} height={40} /> 
<Icon icon={zoomIn} width={40} height={40} /> 

<ZoomMinus width={40} height={40} /> 
<Icon icon={zoomMinus} width={40} height={40} /> 

<ZoomOut width={40} height={40} /> 
<Icon icon={zoomOut} width={40} height={40} /> 

<ZoomPlus width={40} height={40} /> 
<Icon icon={zoomPlus} width={40} height={40} />

Country Icons

Import and Usage

import FlagAbw from '@comfortdelgro/compass-icons/react/country/flag-abw'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import flagAbw from '@comfortdelgro/compass-icons/iconify/country/flag-abw'
;<Icon icon={flagAbw} width={40} height={40} />
flag-abw
flag-afg
flag-ago
flag-aia
flag-ala
flag-alb
flag-and
flag-are
flag-arg
flag-arm
flag-asm
flag-ata
flag-atg
flag-aus
flag-aut
flag-aze
flag-bdi
flag-bel
flag-ben
flag-bes
flag-bfa
flag-bgd
flag-bgr
flag-bhr
flag-bhs
flag-bih
flag-blm
flag-blr
flag-blz
flag-bmu
flag-bol
flag-bra
flag-brb
flag-brn
flag-btn
flag-bwa
flag-caf
flag-can
flag-cck
flag-che
flag-chl
flag-chn
flag-civ
flag-cmr
flag-cod
flag-cog
flag-cok
flag-col
flag-com
flag-cpv
flag-cri
flag-cub
flag-cuw
flag-cxr
flag-cym
flag-cyp
flag-cze
flag-deu
flag-dji
flag-dma
flag-dnk
flag-dom
flag-dza
flag-ecu
flag-egy
flag-eri
flag-esh
flag-esp
flag-est
flag-eth
flag-fin
flag-fji
flag-flk
flag-fra
flag-fro
flag-fsm
flag-gab
flag-gbr
flag-geo
flag-ggy
flag-gha
flag-gib
flag-gin
flag-glp
flag-gmb
flag-gnb
flag-gnq
flag-grc
flag-grd
flag-grl
flag-gtm
flag-guf
flag-gum
flag-guy
flag-hkg
flag-hnd
flag-hrv
flag-hti
flag-hun
flag-idn
flag-imn
flag-ind
flag-iot
flag-irl
flag-irn
flag-irq
flag-isl
flag-isr
flag-ita
flag-jam
flag-jey
flag-jor
flag-jpn
flag-kaz
flag-ken
flag-kgz
flag-khm
flag-kir
flag-kna
flag-kor
flag-kos
flag-kwt
flag-lao
flag-lbn
flag-lbr
flag-lby
flag-lca
flag-lie
flag-lka
flag-lso
flag-ltu
flag-lux
flag-lva
flag-mac
flag-maf
flag-mar
flag-mco
flag-mda
flag-mdg
flag-mdv
flag-mex
flag-mhl
flag-mkd
flag-mli
flag-mlt
flag-mmr
flag-mne
flag-mng
flag-mnp
flag-moz
flag-mrt
flag-msr
flag-mtq
flag-mus
flag-mwi
flag-mys
flag-myt
flag-nam
flag-ncl
flag-ner
flag-nfk
flag-nga
flag-nic
flag-niu
flag-nld
flag-nor
flag-npl
flag-nru
flag-nzl
flag-omn
flag-pak
flag-pan
flag-pcn
flag-per
flag-phl
flag-plw
flag-png
flag-pol
flag-pri
flag-prk
flag-prt
flag-pry
flag-pse
flag-pyf
flag-qat
flag-reu
flag-rou
flag-rus
flag-rwa
flag-sau
flag-sdn
flag-sen
flag-sgp
flag-sgs
flag-shn
flag-sjm
flag-slb
flag-sle
flag-slv
flag-smr
flag-som
flag-spm
flag-srb
flag-ssd
flag-stp
flag-sur
flag-svk
flag-svn
flag-swe
flag-swz
flag-sxm
flag-syc
flag-syr
flag-tca
flag-tcd
flag-tgo
flag-tha
flag-tjk
flag-tkl
flag-tkm
flag-tls
flag-ton
flag-tto
flag-tun
flag-tur
flag-tuv
flag-twn
flag-tza
flag-uga
flag-ukr
flag-ury
flag-usa
flag-uzb
flag-vat
flag-vct
flag-ven
flag-vgb
flag-vir
flag-vnm
flag-vut
flag-wlf
flag-wsm
flag-yem
flag-zaf
flag-zmb
flag-zwe
Typescript
<FlagAbw width={40} height={40} /> 
<Icon icon={flagAbw} width={40} height={40} /> 

<FlagAfg width={40} height={40} /> 
<Icon icon={flagAfg} width={40} height={40} /> 

<FlagAgo width={40} height={40} /> 
<Icon icon={flagAgo} width={40} height={40} /> 

<FlagAia width={40} height={40} /> 
<Icon icon={flagAia} width={40} height={40} /> 

<FlagAla width={40} height={40} /> 
<Icon icon={flagAla} width={40} height={40} /> 

<FlagAlb width={40} height={40} /> 
<Icon icon={flagAlb} width={40} height={40} /> 

<FlagAnd width={40} height={40} /> 
<Icon icon={flagAnd} width={40} height={40} /> 

<FlagAre width={40} height={40} /> 
<Icon icon={flagAre} width={40} height={40} /> 

<FlagArg width={40} height={40} /> 
<Icon icon={flagArg} width={40} height={40} /> 

<FlagArm width={40} height={40} /> 
<Icon icon={flagArm} width={40} height={40} /> 

<FlagAsm width={40} height={40} /> 
<Icon icon={flagAsm} width={40} height={40} /> 

<FlagAta width={40} height={40} /> 
<Icon icon={flagAta} width={40} height={40} /> 

<FlagAtg width={40} height={40} /> 
<Icon icon={flagAtg} width={40} height={40} /> 

<FlagAus width={40} height={40} /> 
<Icon icon={flagAus} width={40} height={40} /> 

<FlagAut width={40} height={40} /> 
<Icon icon={flagAut} width={40} height={40} /> 

<FlagAze width={40} height={40} /> 
<Icon icon={flagAze} width={40} height={40} /> 

<FlagBdi width={40} height={40} /> 
<Icon icon={flagBdi} width={40} height={40} /> 

<FlagBel width={40} height={40} /> 
<Icon icon={flagBel} width={40} height={40} /> 

<FlagBen width={40} height={40} /> 
<Icon icon={flagBen} width={40} height={40} /> 

<FlagBes width={40} height={40} /> 
<Icon icon={flagBes} width={40} height={40} /> 

<FlagBfa width={40} height={40} /> 
<Icon icon={flagBfa} width={40} height={40} /> 

<FlagBgd width={40} height={40} /> 
<Icon icon={flagBgd} width={40} height={40} /> 

<FlagBgr width={40} height={40} /> 
<Icon icon={flagBgr} width={40} height={40} /> 

<FlagBhr width={40} height={40} /> 
<Icon icon={flagBhr} width={40} height={40} /> 

<FlagBhs width={40} height={40} /> 
<Icon icon={flagBhs} width={40} height={40} /> 

<FlagBih width={40} height={40} /> 
<Icon icon={flagBih} width={40} height={40} /> 

<FlagBlm width={40} height={40} /> 
<Icon icon={flagBlm} width={40} height={40} /> 

<FlagBlr width={40} height={40} /> 
<Icon icon={flagBlr} width={40} height={40} /> 

<FlagBlz width={40} height={40} /> 
<Icon icon={flagBlz} width={40} height={40} /> 

<FlagBmu width={40} height={40} /> 
<Icon icon={flagBmu} width={40} height={40} /> 

<FlagBol width={40} height={40} /> 
<Icon icon={flagBol} width={40} height={40} /> 

<FlagBra width={40} height={40} /> 
<Icon icon={flagBra} width={40} height={40} /> 

<FlagBrb width={40} height={40} /> 
<Icon icon={flagBrb} width={40} height={40} /> 

<FlagBrn width={40} height={40} /> 
<Icon icon={flagBrn} width={40} height={40} /> 

<FlagBtn width={40} height={40} /> 
<Icon icon={flagBtn} width={40} height={40} /> 

<FlagBwa width={40} height={40} /> 
<Icon icon={flagBwa} width={40} height={40} /> 

<FlagCaf width={40} height={40} /> 
<Icon icon={flagCaf} width={40} height={40} /> 

<FlagCan width={40} height={40} /> 
<Icon icon={flagCan} width={40} height={40} /> 

<FlagCck width={40} height={40} /> 
<Icon icon={flagCck} width={40} height={40} /> 

<FlagChe width={40} height={40} /> 
<Icon icon={flagChe} width={40} height={40} /> 

<FlagChl width={40} height={40} /> 
<Icon icon={flagChl} width={40} height={40} /> 

<FlagChn width={40} height={40} /> 
<Icon icon={flagChn} width={40} height={40} /> 

<FlagCiv width={40} height={40} /> 
<Icon icon={flagCiv} width={40} height={40} /> 

<FlagCmr width={40} height={40} /> 
<Icon icon={flagCmr} width={40} height={40} /> 

<FlagCod width={40} height={40} /> 
<Icon icon={flagCod} width={40} height={40} /> 

<FlagCog width={40} height={40} /> 
<Icon icon={flagCog} width={40} height={40} /> 

<FlagCok width={40} height={40} /> 
<Icon icon={flagCok} width={40} height={40} /> 

<FlagCol width={40} height={40} /> 
<Icon icon={flagCol} width={40} height={40} /> 

<FlagCom width={40} height={40} /> 
<Icon icon={flagCom} width={40} height={40} /> 

<FlagCpv width={40} height={40} /> 
<Icon icon={flagCpv} width={40} height={40} /> 

<FlagCri width={40} height={40} /> 
<Icon icon={flagCri} width={40} height={40} /> 

<FlagCub width={40} height={40} /> 
<Icon icon={flagCub} width={40} height={40} /> 

<FlagCuw width={40} height={40} /> 
<Icon icon={flagCuw} width={40} height={40} /> 

<FlagCxr width={40} height={40} /> 
<Icon icon={flagCxr} width={40} height={40} /> 

<FlagCym width={40} height={40} /> 
<Icon icon={flagCym} width={40} height={40} /> 

<FlagCyp width={40} height={40} /> 
<Icon icon={flagCyp} width={40} height={40} /> 

<FlagCze width={40} height={40} /> 
<Icon icon={flagCze} width={40} height={40} /> 

<FlagDeu width={40} height={40} /> 
<Icon icon={flagDeu} width={40} height={40} /> 

<FlagDji width={40} height={40} /> 
<Icon icon={flagDji} width={40} height={40} /> 

<FlagDma width={40} height={40} /> 
<Icon icon={flagDma} width={40} height={40} /> 

<FlagDnk width={40} height={40} /> 
<Icon icon={flagDnk} width={40} height={40} /> 

<FlagDom width={40} height={40} /> 
<Icon icon={flagDom} width={40} height={40} /> 

<FlagDza width={40} height={40} /> 
<Icon icon={flagDza} width={40} height={40} /> 

<FlagEcu width={40} height={40} /> 
<Icon icon={flagEcu} width={40} height={40} /> 

<FlagEgy width={40} height={40} /> 
<Icon icon={flagEgy} width={40} height={40} /> 

<FlagEri width={40} height={40} /> 
<Icon icon={flagEri} width={40} height={40} /> 

<FlagEsh width={40} height={40} /> 
<Icon icon={flagEsh} width={40} height={40} /> 

<FlagEsp width={40} height={40} /> 
<Icon icon={flagEsp} width={40} height={40} /> 

<FlagEst width={40} height={40} /> 
<Icon icon={flagEst} width={40} height={40} /> 

<FlagEth width={40} height={40} /> 
<Icon icon={flagEth} width={40} height={40} /> 

<FlagFin width={40} height={40} /> 
<Icon icon={flagFin} width={40} height={40} /> 

<FlagFji width={40} height={40} /> 
<Icon icon={flagFji} width={40} height={40} /> 

<FlagFlk width={40} height={40} /> 
<Icon icon={flagFlk} width={40} height={40} /> 

<FlagFra width={40} height={40} /> 
<Icon icon={flagFra} width={40} height={40} /> 

<FlagFro width={40} height={40} /> 
<Icon icon={flagFro} width={40} height={40} /> 

<FlagFsm width={40} height={40} /> 
<Icon icon={flagFsm} width={40} height={40} /> 

<FlagGab width={40} height={40} /> 
<Icon icon={flagGab} width={40} height={40} /> 

<FlagGbr width={40} height={40} /> 
<Icon icon={flagGbr} width={40} height={40} /> 

<FlagGeo width={40} height={40} /> 
<Icon icon={flagGeo} width={40} height={40} /> 

<FlagGgy width={40} height={40} /> 
<Icon icon={flagGgy} width={40} height={40} /> 

<FlagGha width={40} height={40} /> 
<Icon icon={flagGha} width={40} height={40} /> 

<FlagGib width={40} height={40} /> 
<Icon icon={flagGib} width={40} height={40} /> 

<FlagGin width={40} height={40} /> 
<Icon icon={flagGin} width={40} height={40} /> 

<FlagGlp width={40} height={40} /> 
<Icon icon={flagGlp} width={40} height={40} /> 

<FlagGmb width={40} height={40} /> 
<Icon icon={flagGmb} width={40} height={40} /> 

<FlagGnb width={40} height={40} /> 
<Icon icon={flagGnb} width={40} height={40} /> 

<FlagGnq width={40} height={40} /> 
<Icon icon={flagGnq} width={40} height={40} /> 

<FlagGrc width={40} height={40} /> 
<Icon icon={flagGrc} width={40} height={40} /> 

<FlagGrd width={40} height={40} /> 
<Icon icon={flagGrd} width={40} height={40} /> 

<FlagGrl width={40} height={40} /> 
<Icon icon={flagGrl} width={40} height={40} /> 

<FlagGtm width={40} height={40} /> 
<Icon icon={flagGtm} width={40} height={40} /> 

<FlagGuf width={40} height={40} /> 
<Icon icon={flagGuf} width={40} height={40} /> 

<FlagGum width={40} height={40} /> 
<Icon icon={flagGum} width={40} height={40} /> 

<FlagGuy width={40} height={40} /> 
<Icon icon={flagGuy} width={40} height={40} /> 

<FlagHkg width={40} height={40} /> 
<Icon icon={flagHkg} width={40} height={40} /> 

<FlagHnd width={40} height={40} /> 
<Icon icon={flagHnd} width={40} height={40} /> 

<FlagHrv width={40} height={40} /> 
<Icon icon={flagHrv} width={40} height={40} /> 

<FlagHti width={40} height={40} /> 
<Icon icon={flagHti} width={40} height={40} /> 

<FlagHun width={40} height={40} /> 
<Icon icon={flagHun} width={40} height={40} /> 

<FlagIdn width={40} height={40} /> 
<Icon icon={flagIdn} width={40} height={40} /> 

<FlagImn width={40} height={40} /> 
<Icon icon={flagImn} width={40} height={40} /> 

<FlagInd width={40} height={40} /> 
<Icon icon={flagInd} width={40} height={40} /> 

<FlagIot width={40} height={40} /> 
<Icon icon={flagIot} width={40} height={40} /> 

<FlagIrl width={40} height={40} /> 
<Icon icon={flagIrl} width={40} height={40} /> 

<FlagIrn width={40} height={40} /> 
<Icon icon={flagIrn} width={40} height={40} /> 

<FlagIrq width={40} height={40} /> 
<Icon icon={flagIrq} width={40} height={40} /> 

<FlagIsl width={40} height={40} /> 
<Icon icon={flagIsl} width={40} height={40} /> 

<FlagIsr width={40} height={40} /> 
<Icon icon={flagIsr} width={40} height={40} /> 

<FlagIta width={40} height={40} /> 
<Icon icon={flagIta} width={40} height={40} /> 

<FlagJam width={40} height={40} /> 
<Icon icon={flagJam} width={40} height={40} /> 

<FlagJey width={40} height={40} /> 
<Icon icon={flagJey} width={40} height={40} /> 

<FlagJor width={40} height={40} /> 
<Icon icon={flagJor} width={40} height={40} /> 

<FlagJpn width={40} height={40} /> 
<Icon icon={flagJpn} width={40} height={40} /> 

<FlagKaz width={40} height={40} /> 
<Icon icon={flagKaz} width={40} height={40} /> 

<FlagKen width={40} height={40} /> 
<Icon icon={flagKen} width={40} height={40} /> 

<FlagKgz width={40} height={40} /> 
<Icon icon={flagKgz} width={40} height={40} /> 

<FlagKhm width={40} height={40} /> 
<Icon icon={flagKhm} width={40} height={40} /> 

<FlagKir width={40} height={40} /> 
<Icon icon={flagKir} width={40} height={40} /> 

<FlagKna width={40} height={40} /> 
<Icon icon={flagKna} width={40} height={40} /> 

<FlagKor width={40} height={40} /> 
<Icon icon={flagKor} width={40} height={40} /> 

<FlagKos width={40} height={40} /> 
<Icon icon={flagKos} width={40} height={40} /> 

<FlagKwt width={40} height={40} /> 
<Icon icon={flagKwt} width={40} height={40} /> 

<FlagLao width={40} height={40} /> 
<Icon icon={flagLao} width={40} height={40} /> 

<FlagLbn width={40} height={40} /> 
<Icon icon={flagLbn} width={40} height={40} /> 

<FlagLbr width={40} height={40} /> 
<Icon icon={flagLbr} width={40} height={40} /> 

<FlagLby width={40} height={40} /> 
<Icon icon={flagLby} width={40} height={40} /> 

<FlagLca width={40} height={40} /> 
<Icon icon={flagLca} width={40} height={40} /> 

<FlagLie width={40} height={40} /> 
<Icon icon={flagLie} width={40} height={40} /> 

<FlagLka width={40} height={40} /> 
<Icon icon={flagLka} width={40} height={40} /> 

<FlagLso width={40} height={40} /> 
<Icon icon={flagLso} width={40} height={40} /> 

<FlagLtu width={40} height={40} /> 
<Icon icon={flagLtu} width={40} height={40} /> 

<FlagLux width={40} height={40} /> 
<Icon icon={flagLux} width={40} height={40} /> 

<FlagLva width={40} height={40} /> 
<Icon icon={flagLva} width={40} height={40} /> 

<FlagMac width={40} height={40} /> 
<Icon icon={flagMac} width={40} height={40} /> 

<FlagMaf width={40} height={40} /> 
<Icon icon={flagMaf} width={40} height={40} /> 

<FlagMar width={40} height={40} /> 
<Icon icon={flagMar} width={40} height={40} /> 

<FlagMco width={40} height={40} /> 
<Icon icon={flagMco} width={40} height={40} /> 

<FlagMda width={40} height={40} /> 
<Icon icon={flagMda} width={40} height={40} /> 

<FlagMdg width={40} height={40} /> 
<Icon icon={flagMdg} width={40} height={40} /> 

<FlagMdv width={40} height={40} /> 
<Icon icon={flagMdv} width={40} height={40} /> 

<FlagMex width={40} height={40} /> 
<Icon icon={flagMex} width={40} height={40} /> 

<FlagMhl width={40} height={40} /> 
<Icon icon={flagMhl} width={40} height={40} /> 

<FlagMkd width={40} height={40} /> 
<Icon icon={flagMkd} width={40} height={40} /> 

<FlagMli width={40} height={40} /> 
<Icon icon={flagMli} width={40} height={40} /> 

<FlagMlt width={40} height={40} /> 
<Icon icon={flagMlt} width={40} height={40} /> 

<FlagMmr width={40} height={40} /> 
<Icon icon={flagMmr} width={40} height={40} /> 

<FlagMne width={40} height={40} /> 
<Icon icon={flagMne} width={40} height={40} /> 

<FlagMng width={40} height={40} /> 
<Icon icon={flagMng} width={40} height={40} /> 

<FlagMnp width={40} height={40} /> 
<Icon icon={flagMnp} width={40} height={40} /> 

<FlagMoz width={40} height={40} /> 
<Icon icon={flagMoz} width={40} height={40} /> 

<FlagMrt width={40} height={40} /> 
<Icon icon={flagMrt} width={40} height={40} /> 

<FlagMsr width={40} height={40} /> 
<Icon icon={flagMsr} width={40} height={40} /> 

<FlagMtq width={40} height={40} /> 
<Icon icon={flagMtq} width={40} height={40} /> 

<FlagMus width={40} height={40} /> 
<Icon icon={flagMus} width={40} height={40} /> 

<FlagMwi width={40} height={40} /> 
<Icon icon={flagMwi} width={40} height={40} /> 

<FlagMys width={40} height={40} /> 
<Icon icon={flagMys} width={40} height={40} /> 

<FlagMyt width={40} height={40} /> 
<Icon icon={flagMyt} width={40} height={40} /> 

<FlagNam width={40} height={40} /> 
<Icon icon={flagNam} width={40} height={40} /> 

<FlagNcl width={40} height={40} /> 
<Icon icon={flagNcl} width={40} height={40} /> 

<FlagNer width={40} height={40} /> 
<Icon icon={flagNer} width={40} height={40} /> 

<FlagNfk width={40} height={40} /> 
<Icon icon={flagNfk} width={40} height={40} /> 

<FlagNga width={40} height={40} /> 
<Icon icon={flagNga} width={40} height={40} /> 

<FlagNic width={40} height={40} /> 
<Icon icon={flagNic} width={40} height={40} /> 

<FlagNiu width={40} height={40} /> 
<Icon icon={flagNiu} width={40} height={40} /> 

<FlagNld width={40} height={40} /> 
<Icon icon={flagNld} width={40} height={40} /> 

<FlagNor width={40} height={40} /> 
<Icon icon={flagNor} width={40} height={40} /> 

<FlagNpl width={40} height={40} /> 
<Icon icon={flagNpl} width={40} height={40} /> 

<FlagNru width={40} height={40} /> 
<Icon icon={flagNru} width={40} height={40} /> 

<FlagNzl width={40} height={40} /> 
<Icon icon={flagNzl} width={40} height={40} /> 

<FlagOmn width={40} height={40} /> 
<Icon icon={flagOmn} width={40} height={40} /> 

<FlagPak width={40} height={40} /> 
<Icon icon={flagPak} width={40} height={40} /> 

<FlagPan width={40} height={40} /> 
<Icon icon={flagPan} width={40} height={40} /> 

<FlagPcn width={40} height={40} /> 
<Icon icon={flagPcn} width={40} height={40} /> 

<FlagPer width={40} height={40} /> 
<Icon icon={flagPer} width={40} height={40} /> 

<FlagPhl width={40} height={40} /> 
<Icon icon={flagPhl} width={40} height={40} /> 

<FlagPlw width={40} height={40} /> 
<Icon icon={flagPlw} width={40} height={40} /> 

<FlagPng width={40} height={40} /> 
<Icon icon={flagPng} width={40} height={40} /> 

<FlagPol width={40} height={40} /> 
<Icon icon={flagPol} width={40} height={40} /> 

<FlagPri width={40} height={40} /> 
<Icon icon={flagPri} width={40} height={40} /> 

<FlagPrk width={40} height={40} /> 
<Icon icon={flagPrk} width={40} height={40} /> 

<FlagPrt width={40} height={40} /> 
<Icon icon={flagPrt} width={40} height={40} /> 

<FlagPry width={40} height={40} /> 
<Icon icon={flagPry} width={40} height={40} /> 

<FlagPse width={40} height={40} /> 
<Icon icon={flagPse} width={40} height={40} /> 

<FlagPyf width={40} height={40} /> 
<Icon icon={flagPyf} width={40} height={40} /> 

<FlagQat width={40} height={40} /> 
<Icon icon={flagQat} width={40} height={40} /> 

<FlagReu width={40} height={40} /> 
<Icon icon={flagReu} width={40} height={40} /> 

<FlagRou width={40} height={40} /> 
<Icon icon={flagRou} width={40} height={40} /> 

<FlagRus width={40} height={40} /> 
<Icon icon={flagRus} width={40} height={40} /> 

<FlagRwa width={40} height={40} /> 
<Icon icon={flagRwa} width={40} height={40} /> 

<FlagSau width={40} height={40} /> 
<Icon icon={flagSau} width={40} height={40} /> 

<FlagSdn width={40} height={40} /> 
<Icon icon={flagSdn} width={40} height={40} /> 

<FlagSen width={40} height={40} /> 
<Icon icon={flagSen} width={40} height={40} /> 

<FlagSgp width={40} height={40} /> 
<Icon icon={flagSgp} width={40} height={40} /> 

<FlagSgs width={40} height={40} /> 
<Icon icon={flagSgs} width={40} height={40} /> 

<FlagShn width={40} height={40} /> 
<Icon icon={flagShn} width={40} height={40} /> 

<FlagSjm width={40} height={40} /> 
<Icon icon={flagSjm} width={40} height={40} /> 

<FlagSlb width={40} height={40} /> 
<Icon icon={flagSlb} width={40} height={40} /> 

<FlagSle width={40} height={40} /> 
<Icon icon={flagSle} width={40} height={40} /> 

<FlagSlv width={40} height={40} /> 
<Icon icon={flagSlv} width={40} height={40} /> 

<FlagSmr width={40} height={40} /> 
<Icon icon={flagSmr} width={40} height={40} /> 

<FlagSom width={40} height={40} /> 
<Icon icon={flagSom} width={40} height={40} /> 

<FlagSpm width={40} height={40} /> 
<Icon icon={flagSpm} width={40} height={40} /> 

<FlagSrb width={40} height={40} /> 
<Icon icon={flagSrb} width={40} height={40} /> 

<FlagSsd width={40} height={40} /> 
<Icon icon={flagSsd} width={40} height={40} /> 

<FlagStp width={40} height={40} /> 
<Icon icon={flagStp} width={40} height={40} /> 

<FlagSur width={40} height={40} /> 
<Icon icon={flagSur} width={40} height={40} /> 

<FlagSvk width={40} height={40} /> 
<Icon icon={flagSvk} width={40} height={40} /> 

<FlagSvn width={40} height={40} /> 
<Icon icon={flagSvn} width={40} height={40} /> 

<FlagSwe width={40} height={40} /> 
<Icon icon={flagSwe} width={40} height={40} /> 

<FlagSwz width={40} height={40} /> 
<Icon icon={flagSwz} width={40} height={40} /> 

<FlagSxm width={40} height={40} /> 
<Icon icon={flagSxm} width={40} height={40} /> 

<FlagSyc width={40} height={40} /> 
<Icon icon={flagSyc} width={40} height={40} /> 

<FlagSyr width={40} height={40} /> 
<Icon icon={flagSyr} width={40} height={40} /> 

<FlagTca width={40} height={40} /> 
<Icon icon={flagTca} width={40} height={40} /> 

<FlagTcd width={40} height={40} /> 
<Icon icon={flagTcd} width={40} height={40} /> 

<FlagTgo width={40} height={40} /> 
<Icon icon={flagTgo} width={40} height={40} /> 

<FlagTha width={40} height={40} /> 
<Icon icon={flagTha} width={40} height={40} /> 

<FlagTjk width={40} height={40} /> 
<Icon icon={flagTjk} width={40} height={40} /> 

<FlagTkl width={40} height={40} /> 
<Icon icon={flagTkl} width={40} height={40} /> 

<FlagTkm width={40} height={40} /> 
<Icon icon={flagTkm} width={40} height={40} /> 

<FlagTls width={40} height={40} /> 
<Icon icon={flagTls} width={40} height={40} /> 

<FlagTon width={40} height={40} /> 
<Icon icon={flagTon} width={40} height={40} /> 

<FlagTto width={40} height={40} /> 
<Icon icon={flagTto} width={40} height={40} /> 

<FlagTun width={40} height={40} /> 
<Icon icon={flagTun} width={40} height={40} /> 

<FlagTur width={40} height={40} /> 
<Icon icon={flagTur} width={40} height={40} /> 

<FlagTuv width={40} height={40} /> 
<Icon icon={flagTuv} width={40} height={40} /> 

<FlagTwn width={40} height={40} /> 
<Icon icon={flagTwn} width={40} height={40} /> 

<FlagTza width={40} height={40} /> 
<Icon icon={flagTza} width={40} height={40} /> 

<FlagUga width={40} height={40} /> 
<Icon icon={flagUga} width={40} height={40} /> 

<FlagUkr width={40} height={40} /> 
<Icon icon={flagUkr} width={40} height={40} /> 

<FlagUry width={40} height={40} /> 
<Icon icon={flagUry} width={40} height={40} /> 

<FlagUsa width={40} height={40} /> 
<Icon icon={flagUsa} width={40} height={40} /> 

<FlagUzb width={40} height={40} /> 
<Icon icon={flagUzb} width={40} height={40} /> 

<FlagVat width={40} height={40} /> 
<Icon icon={flagVat} width={40} height={40} /> 

<FlagVct width={40} height={40} /> 
<Icon icon={flagVct} width={40} height={40} /> 

<FlagVen width={40} height={40} /> 
<Icon icon={flagVen} width={40} height={40} /> 

<FlagVgb width={40} height={40} /> 
<Icon icon={flagVgb} width={40} height={40} /> 

<FlagVir width={40} height={40} /> 
<Icon icon={flagVir} width={40} height={40} /> 

<FlagVnm width={40} height={40} /> 
<Icon icon={flagVnm} width={40} height={40} /> 

<FlagVut width={40} height={40} /> 
<Icon icon={flagVut} width={40} height={40} /> 

<FlagWlf width={40} height={40} /> 
<Icon icon={flagWlf} width={40} height={40} /> 

<FlagWsm width={40} height={40} /> 
<Icon icon={flagWsm} width={40} height={40} /> 

<FlagYem width={40} height={40} /> 
<Icon icon={flagYem} width={40} height={40} /> 

<FlagZaf width={40} height={40} /> 
<Icon icon={flagZaf} width={40} height={40} /> 

<FlagZmb width={40} height={40} /> 
<Icon icon={flagZmb} width={40} height={40} /> 

<FlagZwe width={40} height={40} /> 
<Icon icon={flagZwe} width={40} height={40} />

File Icons

Import and Usage

import SVG from '@comfortdelgro/compass-icons/react/file/svg'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import svg from '@comfortdelgro/compass-icons/iconify/file/svg'
;<Icon icon={svg} width={40} height={40} />
aep-gray
aep-solid
aep
ai-gray
ai-solid
ai
audio-gray
audio-solid
audio
avi-gray
avi-solid
avi
code-gray
code-solid
code
css-gray
css-solid
css
csv-gray
csv-solid
csv
dmg-gray
dmg-solid
dmg
doc-gray
doc-solid
doc
document-gray
document-solid
document
docx-gray
docx-solid
docx
empty-gray
empty-solid
empty
esp-gray
esp-solid
esp
exe-gray
exe-solid
exe
fig-gray
fig-solid
fig
folder-gray
folder-solid
folder
gif-gray
gif-solid
gif
html-gray
html-solid
html
image-gray
image-solid
image
img-gray
img-solid
img
indd-gray
indd-solid
indd
java-gray
java-solid
java
jpeg-gray
jpeg-solid
jpeg
jpg-gray
jpg-solid
jpg
js-gray
js-solid
js
json-gray
json-solid
json
mkv-gray
mkv-solid
mkv
mp3-gray
mp3-solid
mp3
mp4-gray
mp4-solid
mp4
mpeg-gray
mpeg-solid
mpeg
pdf-gray
pdf-solid
pdf
pdf2-gray
pdf2-solid
pdf2
png-gray
png-solid
png
psd-gray
psd-solid
psd
ptt-gray
ptt-solid
ptt
pttx-gray
pttx-solid
pttx
rar-gray
rar-solid
rar
rss-gray
rss-solid
rss
spreadsheet-gray
spreadsheet-solid
spreadsheet
sql-gray
sql-solid
sql
svg-gray
svg-solid
svg
tiff-gray
tiff-solid
tiff
txt-gray
txt-solid
txt
video01-gray
video01-solid
video01
video02-gray
video02-solid
video02
wav-gray
wav-solid
wav
webp-gray
webp-solid
webp
xlsx-gray
xlsx-solid
xlsx
xml-gray
xml-solid
xml
zip-gray
zip-solid
zip
Typescript
<AepGray width={40} height={40} /> 
<Icon icon={aepGray} width={40} height={40} /> 

<AepSolid width={40} height={40} /> 
<Icon icon={aepSolid} width={40} height={40} /> 

<Aep width={40} height={40} /> 
<Icon icon={aep} width={40} height={40} /> 

<AiGray width={40} height={40} /> 
<Icon icon={aiGray} width={40} height={40} /> 

<AiSolid width={40} height={40} /> 
<Icon icon={aiSolid} width={40} height={40} /> 

<Ai width={40} height={40} /> 
<Icon icon={ai} width={40} height={40} /> 

<AudioGray width={40} height={40} /> 
<Icon icon={audioGray} width={40} height={40} /> 

<AudioSolid width={40} height={40} /> 
<Icon icon={audioSolid} width={40} height={40} /> 

<Audio width={40} height={40} /> 
<Icon icon={audio} width={40} height={40} /> 

<AviGray width={40} height={40} /> 
<Icon icon={aviGray} width={40} height={40} /> 

<AviSolid width={40} height={40} /> 
<Icon icon={aviSolid} width={40} height={40} /> 

<Avi width={40} height={40} /> 
<Icon icon={avi} width={40} height={40} /> 

<CodeGray width={40} height={40} /> 
<Icon icon={codeGray} width={40} height={40} /> 

<CodeSolid width={40} height={40} /> 
<Icon icon={codeSolid} width={40} height={40} /> 

<Code width={40} height={40} /> 
<Icon icon={code} width={40} height={40} /> 

<CssGray width={40} height={40} /> 
<Icon icon={cssGray} width={40} height={40} /> 

<CssSolid width={40} height={40} /> 
<Icon icon={cssSolid} width={40} height={40} /> 

<Css width={40} height={40} /> 
<Icon icon={css} width={40} height={40} /> 

<CsvGray width={40} height={40} /> 
<Icon icon={csvGray} width={40} height={40} /> 

<CsvSolid width={40} height={40} /> 
<Icon icon={csvSolid} width={40} height={40} /> 

<Csv width={40} height={40} /> 
<Icon icon={csv} width={40} height={40} /> 

<DmgGray width={40} height={40} /> 
<Icon icon={dmgGray} width={40} height={40} /> 

<DmgSolid width={40} height={40} /> 
<Icon icon={dmgSolid} width={40} height={40} /> 

<Dmg width={40} height={40} /> 
<Icon icon={dmg} width={40} height={40} /> 

<DocGray width={40} height={40} /> 
<Icon icon={docGray} width={40} height={40} /> 

<DocSolid width={40} height={40} /> 
<Icon icon={docSolid} width={40} height={40} /> 

<Doc width={40} height={40} /> 
<Icon icon={doc} width={40} height={40} /> 

<DocumentGray width={40} height={40} /> 
<Icon icon={documentGray} width={40} height={40} /> 

<DocumentSolid width={40} height={40} /> 
<Icon icon={documentSolid} width={40} height={40} /> 

<Document width={40} height={40} /> 
<Icon icon={document} width={40} height={40} /> 

<DocxGray width={40} height={40} /> 
<Icon icon={docxGray} width={40} height={40} /> 

<DocxSolid width={40} height={40} /> 
<Icon icon={docxSolid} width={40} height={40} /> 

<Docx width={40} height={40} /> 
<Icon icon={docx} width={40} height={40} /> 

<EmptyGray width={40} height={40} /> 
<Icon icon={emptyGray} width={40} height={40} /> 

<EmptySolid width={40} height={40} /> 
<Icon icon={emptySolid} width={40} height={40} /> 

<Empty width={40} height={40} /> 
<Icon icon={empty} width={40} height={40} /> 

<EspGray width={40} height={40} /> 
<Icon icon={espGray} width={40} height={40} /> 

<EspSolid width={40} height={40} /> 
<Icon icon={espSolid} width={40} height={40} /> 

<Esp width={40} height={40} /> 
<Icon icon={esp} width={40} height={40} /> 

<ExeGray width={40} height={40} /> 
<Icon icon={exeGray} width={40} height={40} /> 

<ExeSolid width={40} height={40} /> 
<Icon icon={exeSolid} width={40} height={40} /> 

<Exe width={40} height={40} /> 
<Icon icon={exe} width={40} height={40} /> 

<FigGray width={40} height={40} /> 
<Icon icon={figGray} width={40} height={40} /> 

<FigSolid width={40} height={40} /> 
<Icon icon={figSolid} width={40} height={40} /> 

<Fig width={40} height={40} /> 
<Icon icon={fig} width={40} height={40} /> 

<FolderGray width={40} height={40} /> 
<Icon icon={folderGray} width={40} height={40} /> 

<FolderSolid width={40} height={40} /> 
<Icon icon={folderSolid} width={40} height={40} /> 

<Folder width={40} height={40} /> 
<Icon icon={folder} width={40} height={40} /> 

<GifGray width={40} height={40} /> 
<Icon icon={gifGray} width={40} height={40} /> 

<GifSolid width={40} height={40} /> 
<Icon icon={gifSolid} width={40} height={40} /> 

<Gif width={40} height={40} /> 
<Icon icon={gif} width={40} height={40} /> 

<HtmlGray width={40} height={40} /> 
<Icon icon={htmlGray} width={40} height={40} /> 

<HtmlSolid width={40} height={40} /> 
<Icon icon={htmlSolid} width={40} height={40} /> 

<Html width={40} height={40} /> 
<Icon icon={html} width={40} height={40} /> 

<ImageGray width={40} height={40} /> 
<Icon icon={imageGray} width={40} height={40} /> 

<ImageSolid width={40} height={40} /> 
<Icon icon={imageSolid} width={40} height={40} /> 

<Image width={40} height={40} /> 
<Icon icon={image} width={40} height={40} /> 

<ImgGray width={40} height={40} /> 
<Icon icon={imgGray} width={40} height={40} /> 

<ImgSolid width={40} height={40} /> 
<Icon icon={imgSolid} width={40} height={40} /> 

<Img width={40} height={40} /> 
<Icon icon={img} width={40} height={40} /> 

<InddGray width={40} height={40} /> 
<Icon icon={inddGray} width={40} height={40} /> 

<InddSolid width={40} height={40} /> 
<Icon icon={inddSolid} width={40} height={40} /> 

<Indd width={40} height={40} /> 
<Icon icon={indd} width={40} height={40} /> 

<JavaGray width={40} height={40} /> 
<Icon icon={javaGray} width={40} height={40} /> 

<JavaSolid width={40} height={40} /> 
<Icon icon={javaSolid} width={40} height={40} /> 

<Java width={40} height={40} /> 
<Icon icon={java} width={40} height={40} /> 

<JpegGray width={40} height={40} /> 
<Icon icon={jpegGray} width={40} height={40} /> 

<JpegSolid width={40} height={40} /> 
<Icon icon={jpegSolid} width={40} height={40} /> 

<Jpeg width={40} height={40} /> 
<Icon icon={jpeg} width={40} height={40} /> 

<JpgGray width={40} height={40} /> 
<Icon icon={jpgGray} width={40} height={40} /> 

<JpgSolid width={40} height={40} /> 
<Icon icon={jpgSolid} width={40} height={40} /> 

<Jpg width={40} height={40} /> 
<Icon icon={jpg} width={40} height={40} /> 

<JsGray width={40} height={40} /> 
<Icon icon={jsGray} width={40} height={40} /> 

<JsSolid width={40} height={40} /> 
<Icon icon={jsSolid} width={40} height={40} /> 

<Js width={40} height={40} /> 
<Icon icon={js} width={40} height={40} /> 

<JsonGray width={40} height={40} /> 
<Icon icon={jsonGray} width={40} height={40} /> 

<JsonSolid width={40} height={40} /> 
<Icon icon={jsonSolid} width={40} height={40} /> 

<Json width={40} height={40} /> 
<Icon icon={json} width={40} height={40} /> 

<MkvGray width={40} height={40} /> 
<Icon icon={mkvGray} width={40} height={40} /> 

<MkvSolid width={40} height={40} /> 
<Icon icon={mkvSolid} width={40} height={40} /> 

<Mkv width={40} height={40} /> 
<Icon icon={mkv} width={40} height={40} /> 

<Mp3Gray width={40} height={40} /> 
<Icon icon={mp3Gray} width={40} height={40} /> 

<Mp3Solid width={40} height={40} /> 
<Icon icon={mp3Solid} width={40} height={40} /> 

<Mp3 width={40} height={40} /> 
<Icon icon={mp3} width={40} height={40} /> 

<Mp4Gray width={40} height={40} /> 
<Icon icon={mp4Gray} width={40} height={40} /> 

<Mp4Solid width={40} height={40} /> 
<Icon icon={mp4Solid} width={40} height={40} /> 

<Mp4 width={40} height={40} /> 
<Icon icon={mp4} width={40} height={40} /> 

<MpegGray width={40} height={40} /> 
<Icon icon={mpegGray} width={40} height={40} /> 

<MpegSolid width={40} height={40} /> 
<Icon icon={mpegSolid} width={40} height={40} /> 

<Mpeg width={40} height={40} /> 
<Icon icon={mpeg} width={40} height={40} /> 

<PdfGray width={40} height={40} /> 
<Icon icon={pdfGray} width={40} height={40} /> 

<PdfSolid width={40} height={40} /> 
<Icon icon={pdfSolid} width={40} height={40} /> 

<Pdf width={40} height={40} /> 
<Icon icon={pdf} width={40} height={40} /> 

<Pdf2Gray width={40} height={40} /> 
<Icon icon={pdf2Gray} width={40} height={40} /> 

<Pdf2Solid width={40} height={40} /> 
<Icon icon={pdf2Solid} width={40} height={40} /> 

<Pdf2 width={40} height={40} /> 
<Icon icon={pdf2} width={40} height={40} /> 

<PngGray width={40} height={40} /> 
<Icon icon={pngGray} width={40} height={40} /> 

<PngSolid width={40} height={40} /> 
<Icon icon={pngSolid} width={40} height={40} /> 

<Png width={40} height={40} /> 
<Icon icon={png} width={40} height={40} /> 

<PsdGray width={40} height={40} /> 
<Icon icon={psdGray} width={40} height={40} /> 

<PsdSolid width={40} height={40} /> 
<Icon icon={psdSolid} width={40} height={40} /> 

<Psd width={40} height={40} /> 
<Icon icon={psd} width={40} height={40} /> 

<PttGray width={40} height={40} /> 
<Icon icon={pttGray} width={40} height={40} /> 

<PttSolid width={40} height={40} /> 
<Icon icon={pttSolid} width={40} height={40} /> 

<Ptt width={40} height={40} /> 
<Icon icon={ptt} width={40} height={40} /> 

<PttxGray width={40} height={40} /> 
<Icon icon={pttxGray} width={40} height={40} /> 

<PttxSolid width={40} height={40} /> 
<Icon icon={pttxSolid} width={40} height={40} /> 

<Pttx width={40} height={40} /> 
<Icon icon={pttx} width={40} height={40} /> 

<RarGray width={40} height={40} /> 
<Icon icon={rarGray} width={40} height={40} /> 

<RarSolid width={40} height={40} /> 
<Icon icon={rarSolid} width={40} height={40} /> 

<Rar width={40} height={40} /> 
<Icon icon={rar} width={40} height={40} /> 

<RssGray width={40} height={40} /> 
<Icon icon={rssGray} width={40} height={40} /> 

<RssSolid width={40} height={40} /> 
<Icon icon={rssSolid} width={40} height={40} /> 

<Rss width={40} height={40} /> 
<Icon icon={rss} width={40} height={40} /> 

<SpreadsheetGray width={40} height={40} /> 
<Icon icon={spreadsheetGray} width={40} height={40} /> 

<SpreadsheetSolid width={40} height={40} /> 
<Icon icon={spreadsheetSolid} width={40} height={40} /> 

<Spreadsheet width={40} height={40} /> 
<Icon icon={spreadsheet} width={40} height={40} /> 

<SqlGray width={40} height={40} /> 
<Icon icon={sqlGray} width={40} height={40} /> 

<SqlSolid width={40} height={40} /> 
<Icon icon={sqlSolid} width={40} height={40} /> 

<Sql width={40} height={40} /> 
<Icon icon={sql} width={40} height={40} /> 

<SvgGray width={40} height={40} /> 
<Icon icon={svgGray} width={40} height={40} /> 

<SvgSolid width={40} height={40} /> 
<Icon icon={svgSolid} width={40} height={40} /> 

<Svg width={40} height={40} /> 
<Icon icon={svg} width={40} height={40} /> 

<TiffGray width={40} height={40} /> 
<Icon icon={tiffGray} width={40} height={40} /> 

<TiffSolid width={40} height={40} /> 
<Icon icon={tiffSolid} width={40} height={40} /> 

<Tiff width={40} height={40} /> 
<Icon icon={tiff} width={40} height={40} /> 

<TxtGray width={40} height={40} /> 
<Icon icon={txtGray} width={40} height={40} /> 

<TxtSolid width={40} height={40} /> 
<Icon icon={txtSolid} width={40} height={40} /> 

<Txt width={40} height={40} /> 
<Icon icon={txt} width={40} height={40} /> 

<Video01Gray width={40} height={40} /> 
<Icon icon={video01Gray} width={40} height={40} /> 

<Video01Solid width={40} height={40} /> 
<Icon icon={video01Solid} width={40} height={40} /> 

<Video01 width={40} height={40} /> 
<Icon icon={video01} width={40} height={40} /> 

<Video02Gray width={40} height={40} /> 
<Icon icon={video02Gray} width={40} height={40} /> 

<Video02Solid width={40} height={40} /> 
<Icon icon={video02Solid} width={40} height={40} /> 

<Video02 width={40} height={40} /> 
<Icon icon={video02} width={40} height={40} /> 

<WavGray width={40} height={40} /> 
<Icon icon={wavGray} width={40} height={40} /> 

<WavSolid width={40} height={40} /> 
<Icon icon={wavSolid} width={40} height={40} /> 

<Wav width={40} height={40} /> 
<Icon icon={wav} width={40} height={40} /> 

<WebpGray width={40} height={40} /> 
<Icon icon={webpGray} width={40} height={40} /> 

<WebpSolid width={40} height={40} /> 
<Icon icon={webpSolid} width={40} height={40} /> 

<Webp width={40} height={40} /> 
<Icon icon={webp} width={40} height={40} /> 

<XlsxGray width={40} height={40} /> 
<Icon icon={xlsxGray} width={40} height={40} /> 

<XlsxSolid width={40} height={40} /> 
<Icon icon={xlsxSolid} width={40} height={40} /> 

<Xlsx width={40} height={40} /> 
<Icon icon={xlsx} width={40} height={40} /> 

<XmlGray width={40} height={40} /> 
<Icon icon={xmlGray} width={40} height={40} /> 

<XmlSolid width={40} height={40} /> 
<Icon icon={xmlSolid} width={40} height={40} /> 

<Xml width={40} height={40} /> 
<Icon icon={xml} width={40} height={40} /> 

<ZipGray width={40} height={40} /> 
<Icon icon={zipGray} width={40} height={40} /> 

<ZipSolid width={40} height={40} /> 
<Icon icon={zipSolid} width={40} height={40} /> 

<Zip width={40} height={40} /> 
<Icon icon={zip} width={40} height={40} />

H5 Icons

Import and Usage

import H5AccountFilled from '@comfortdelgro/compass-icons/react/h5/h5-account-filled'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import h5AccountFilled from '@comfortdelgro/compass-icons/iconify/h5/h5-account-filled'
;<Icon icon={svg} width={40} height={40} />
h5-account-filled
h5-account-outlined
h5-activities-filled
h5-activities-outlined
h5-add-heart
h5-add
h5-call
h5-circle-outlined
h5-clock
h5-close
h5-coin
h5-double-right
h5-filter
h5-heart
h5-home-filled
h5-home-outlined
h5-map
h5-marker-border-white
h5-marker-border
h5-marker
h5-notifications-filled
h5-notifications-outlined
h5-pen
h5-remove
h5-search
h5-share
h5-smile
h5-switch
Typescript
<H5AccountFilled width={40} height={40} /> 
<Icon icon={h5AccountFilled} width={40} height={40} /> 

<H5AccountOutlined width={40} height={40} /> 
<Icon icon={h5AccountOutlined} width={40} height={40} /> 

<H5ActivitiesFilled width={40} height={40} /> 
<Icon icon={h5ActivitiesFilled} width={40} height={40} /> 

<H5ActivitiesOutlined width={40} height={40} /> 
<Icon icon={h5ActivitiesOutlined} width={40} height={40} /> 

<H5AddHeart width={40} height={40} /> 
<Icon icon={h5AddHeart} width={40} height={40} /> 

<H5Add width={40} height={40} /> 
<Icon icon={h5Add} width={40} height={40} /> 

<H5Call width={40} height={40} /> 
<Icon icon={h5Call} width={40} height={40} /> 

<H5CircleOutlined width={40} height={40} /> 
<Icon icon={h5CircleOutlined} width={40} height={40} /> 

<H5Clock width={40} height={40} /> 
<Icon icon={h5Clock} width={40} height={40} /> 

<H5Close width={40} height={40} /> 
<Icon icon={h5Close} width={40} height={40} /> 

<H5Coin width={40} height={40} /> 
<Icon icon={h5Coin} width={40} height={40} /> 

<H5DoubleRight width={40} height={40} /> 
<Icon icon={h5DoubleRight} width={40} height={40} /> 

<H5Filter width={40} height={40} /> 
<Icon icon={h5Filter} width={40} height={40} /> 

<H5Heart width={40} height={40} /> 
<Icon icon={h5Heart} width={40} height={40} /> 

<H5HomeFilled width={40} height={40} /> 
<Icon icon={h5HomeFilled} width={40} height={40} /> 

<H5HomeOutlined width={40} height={40} /> 
<Icon icon={h5HomeOutlined} width={40} height={40} /> 

<H5Map width={40} height={40} /> 
<Icon icon={h5Map} width={40} height={40} /> 

<H5MarkerBorderWhite width={40} height={40} /> 
<Icon icon={h5MarkerBorderWhite} width={40} height={40} /> 

<H5MarkerBorder width={40} height={40} /> 
<Icon icon={h5MarkerBorder} width={40} height={40} /> 

<H5Marker width={40} height={40} /> 
<Icon icon={h5Marker} width={40} height={40} /> 

<H5NotificationsFilled width={40} height={40} /> 
<Icon icon={h5NotificationsFilled} width={40} height={40} /> 

<H5NotificationsOutlined width={40} height={40} /> 
<Icon icon={h5NotificationsOutlined} width={40} height={40} /> 

<H5Pen width={40} height={40} /> 
<Icon icon={h5Pen} width={40} height={40} /> 

<H5Remove width={40} height={40} /> 
<Icon icon={h5Remove} width={40} height={40} /> 

<H5Search width={40} height={40} /> 
<Icon icon={h5Search} width={40} height={40} /> 

<H5Share width={40} height={40} /> 
<Icon icon={h5Share} width={40} height={40} /> 

<H5Smile width={40} height={40} /> 
<Icon icon={h5Smile} width={40} height={40} /> 

<H5Switch width={40} height={40} /> 
<Icon icon={h5Switch} width={40} height={40} />

Props for react icons

Name Type Default Description
color string — Color of the icon
height number — Height of the icon
width number — Width of the icon
id string — Unique ID of the icon
style string — Style of the icon
className CSS — Class name of the icon

© 2023 CDG Zig. All rights reserved.

Privacy

Terms & Conditions

Contents
Icons
Import
Usage
Filled Icons
Outline Icons
Duotone Icons
Colorful Icons
Payment Icons
Other Icons
Country Icons
File Icons
H5 Icons
Props for react icons